import classNames from "classnames";
import styles from "@pages/home/widgets/channel/styles/edit.module.less";
import React, { useEffect, useState } from "react";

interface Props {
    render: boolean;
    value: boolean;
    onChange: (value: boolean) => void;
}

export default function EditButton({ render, value, onChange }: Props) {
    // 用于控制按钮显示完成还是编辑
    const [editing, setEditing] = useState(value);

    // 监听外部状态是否变化
    useEffect(() => {
        // 将外部状态同步到内部
        setEditing(value);
    }, [value]);

    // 监听内部状态是否变化
    useEffect(() => {
        // 将状态同步到外部
        onChange(editing);
    }, [editing, onChange]);

    useEffect(() => {
        // 监听是否渲染按钮, 如果按钮不渲染了, 取消编辑状态
        if (!render) {
            setEditing(false);
        }
    }, [render]);

    return render ? (
        <button
            onClick={() => {
                setEditing(!editing);
            }}
            className={classNames({ [styles.active]: editing })}
        >
            {editing ? "完成" : "编辑"}
        </button>
    ) : null;
}